<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易任务管理系统</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="container">
        <h1>简易任务管理系统</h1>
        
        <!-- 消息提示区域 -->
        {% with messages = get_flashed_messages() %}
            {% if messages %}
                <div class="messages">
                    {% for message in messages %}
                        <div class="message">{{ message }}</div>
                    {% endfor %}
                </div>
            {% endif %}
        {% endwith %}
        
        <!-- 搜索和筛选区域 -->
        <div class="filter-section">
            <div class="filter-left">
                <a href="{{ url_for('new_task') }}" class="new-task-btn">新建任务</a>
            </div>
            <div class="filter-right">
                <!-- 状态筛选 -->
                <div class="filter-group">
                    <label for="status-filter">状态:</label>
                    <select id="status-filter" onchange="applyFilter()">
                        <option value="all" {% if status_filter == 'all' %}selected{% endif %}>全部</option>
                        <option value="pending" {% if status_filter == 'pending' %}selected{% endif %}>待办</option>
                        <option value="in_progress" {% if status_filter == 'in_progress' %}selected{% endif %}>进行中</option>
                        <option value="completed" {% if status_filter == 'completed' %}selected{% endif %}>已完成</option>
                    </select>
                </div>
                
                <!-- 排序方式 -->
                <div class="filter-group">
                    <label for="sort-by">排序:</label>
                    <select id="sort-by" onchange="applyFilter()">
                        <option value="default" {% if not sort_by %}selected{% endif %}>默认</option>
                        <option value="priority" {% if sort_by == 'priority' %}selected{% endif %}>优先级</option>
                        <option value="due_date" {% if sort_by == 'due_date' %}selected{% endif %}>截止日期</option>
                    </select>
                </div>
            </div>
        </div>
        
        <!-- 统计信息区域 -->
        <div class="stats-section">
            <div class="stat-item">
                <span class="stat-label">总任务数:</span>
                <span class="stat-value">{{ stats.total_tasks }}</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">待办任务:</span>
                <span class="stat-value pending">{{ stats.status_counts['pending'] }}</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">进行中:</span>
                <span class="stat-value in-progress">{{ stats.status_counts['in_progress'] }}</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">已完成:</span>
                <span class="stat-value completed">{{ stats.status_counts['completed'] }}</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">逾期任务:</span>
                <span class="stat-value overdue">{{ stats.overdue_tasks }}</span>
            </div>
        </div>
        
        <!-- 任务列表 -->
        <div class="tasks-section">
            {% if tasks %}
                <table class="tasks-table">
                    <thead>
                        <tr>
                            <th>标题</th>
                            <th>状态</th>
                            <th>优先级</th>
                            <th>截止日期</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for task in tasks %}
                            <tr class="task-item">
                                <td class="task-title">{{ task[1] }}</td>
                                <td>
                                    <span class="status-badge {{ task[3] }}">
                                        {% if task[3] == 'pending' %}待办
                                        {% elif task[3] == 'in_progress' %}进行中
                                        {% else %}已完成
                                        {% endif %}
                                    </span>
                                </td>
                                <td>
                                    <span class="priority-badge {{ task[4] }}">
                                        {% if task[4] == 'high' %}高
                                        {% elif task[4] == 'medium' %}中
                                        {% else %}低
                                        {% endif %}
                                    </span>
                                </td>
                                <td>
                                    {% if task[5] %}
                                        {{ task[5] }}
                                        {% if task[3] != 'completed' and task[5] < now_date %}<span class="overdue-tag">逾期</span>{% endif %}
                                    {% else %}无
                                    {% endif %}
                                </td>
                                <td>{{ task[6] }}</td>
                                <td class="task-actions">
                                    <a href="{{ url_for('edit_task', task_id=task[0]) }}" class="edit-btn">编辑</a>
                                    <a href="{{ url_for('delete_task_route', task_id=task[0]) }}" class="delete-btn" onclick="return confirm('确定要删除这个任务吗？')">删除</a>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% else %}
                <div class="no-tasks">
                    <p>暂无任务，点击"新建任务"开始添加吧！</p>
                </div>
            {% endif %}
        </div>
    </div>
    
    <script>
        // 应用筛选条件
        function applyFilter() {
            const statusFilter = document.getElementById('status-filter').value;
            const sortBy = document.getElementById('sort-by').value;
            
            let url = '?';
            if (statusFilter && statusFilter !== 'all') {
                url += 'status=' + statusFilter;
            }
            if (sortBy && sortBy !== 'default') {
                if (url !== '?') url += '&';
                url += 'sort=' + sortBy;
            }
            
            window.location.href = url;
        }
        
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 添加消息提示的自动消失效果
            const messages = document.querySelectorAll('.message');
            messages.forEach(message => {
                setTimeout(() => {
                    message.classList.add('fade-out');
                }, 3000);
            });
        });
    </script>
</body>
</html>